<template>
  <div class="target-card">
    <el-container>
      <el-header class="target-title" height="3vh">
        <ri i="target"></ri>
        <span class="target-name">{{ i.name }}</span>
        <span class="target-intro">{{i.intro}}</span>
        <div class="target-progress">
          <el-progress :stroke-width="6" :percentage="i.progress"></el-progress>
        </div>
      </el-header>
      <el-main class="target-info-pane">
        <ri i="todo"></ri>
      </el-main>
      <el-footer class="target-stats-pane" height="3vh">
        <div class="item-stats-stars">
          <ri i="star-fill"></ri>{{ i.stars }}</div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { toHumanString } from "@js/math.js";
export default {
  components: {},
  props: {
    i: Object,
    id: String,
    title: String,
    authors: String,
  },
  data() {
    return {
    };
  },
  computed: {
    getLatelyFollower() {
      return toHumanString(1);
    },
  },
  methods: {
    onClick() {
      console.log("On book info click");
    },
    goPlan() {
      this.$router.push("/review/plan/" + this.id);
    },
    goReview() {
      this.$router.push("/review/book/" + this.id);
    },
  },
};
</script>

<style lang="stylus">
.target-card
  display inline-block
  width 90%
  height 15vh
  margin 1vh 1vw
  padding 1vh 1vw
  text-align left
  border 1px solid #eee
  border-radius 4px
  cursor pointer

  &:hover
    // border 1px solid #ccc
    // background-color #fafafa
    // box-shadow 1px 0 5px rgba(0,0,0,.1)
    border 1px solid #B3D8FF
    background-color #ECF5FF
    box-shadow 1px 0 5px rgba(0,0,0,.1)

  .icon-button
    margin-right 0.5vw

  .target-title
    margin-bottom 0.5vh

    span
      margin-right 0.5vw

    .icon-button
      color #E6A23C

    .target-name
      font-size 1.2em
      font-weight bold

    .target-intro
      font-size 0.8em
      color #666

    .target-progress
      float right
      display inline-block
      width 10vw

    .target-time
      float right
      margin-right 1vw

  .target-info-pane
    height 9vh
    padding 1vh 1vw


  .target-stats-pane
    text-align left
    padding 0 1vw
</style>


